<!--
 * @Author: byron
 * @Date: 2021-10-26 01:21:51
 * @LastEditTime: 2022-02-18 20:24:22
-->
<template>
    <div>
        <page-header title="当前权限">
            <a-button @click="refreshPermissionBtn">刷新当前权限</a-button>
        </page-header>
        <page-layout>
            <a-row :gutter="[10, 10]">
                <a-col :span="24">
                    <a-card>
                        <h3>当前角色：{{ userInfo.role }}</h3>
                    </a-card>
                </a-col>
                <a-col :span="24" v-if="permissionData.length != 0">
                    <a-table
                        :pagination="false"
                        :dataSource="permissionData"
                        :columns="columns"
                        bordered
                    >
                        <template #bodyCell="{ column, record, index }">
                            <template v-if="column.key === 'index'">
                                {{ index + 1 }}
                            </template>
                            <template v-else-if="column.key === 'level'">
                                <template v-if="record.level == 0"
                                    ><a-tag color="pink">一级</a-tag></template
                                >
                                <template v-else-if="record.level == 1"
                                    ><a-tag color="blue">二级</a-tag></template
                                >
                                <template v-else-if="record.level == 2"
                                    ><a-tag color="green">三级</a-tag></template
                                >
                            </template>
                        </template>
                    </a-table>
                </a-col>
                <a-col :span="24" v-else>
                    <a-card
                        >当前除查看权限之外无其它权限，如需分配权限请联系管理员</a-card
                    >
                </a-col>
            </a-row>
        </page-layout>
    </div>
</template>

<script>
import { refreshPermission, permissionDetail } from '@/api/index.js'
import { message } from 'ant-design-vue'
import { computed, ref } from 'vue'
import { useStore } from 'vuex'

export default {
    name: 'permission',
    setup() {
        const store = useStore()
        const userInfo = computed(() => store.state.user.userInfo)
        console.log(userInfo.value, 'userInfo')
        console.log(userInfo.value.role_id, 'userInfo')
        const permissionData = ref([])

        const _permissionDetail = async () => {
            const { data: r } = await permissionDetail(userInfo.value.role_id)
            console.log(r.data, 'sca')
            permissionData.value = r.data.filter((e) => {
                return e.level == 2
            })
        }
        const refreshPermissionBtn = async () => {
            const { data: res } = await refreshPermission()
            const { code } = res
            if (code == 200) {
                message.success('刷新当前用户权限成功')
            }
        }
        _permissionDetail()
        return {
            userInfo,
            refreshPermissionBtn,
            permissionData,
            columns: [
                {
                    title: '#',
                    key: 'index',
                },
                {
                    title: '权限名称',
                    dataIndex: 'name',
                    key: 'name',
                },
                {
                    title: '路径',
                    dataIndex: 'con',
                    key: 'con',
                },
                {
                    title: '权限等级',
                    dataIndex: 'level',
                    key: 'level',
                },
            ],
        }
    },
}
</script>

<style scoped lang="less"></style>
